<template>
  <div>
    <button @click="downloadImage" class="nb">下载抠图</button>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseleave="stopDrawing"
      style="border: 1px solid #000;"></canvas>

    <button @click="renderRandomImage">随机切换图片</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const canvas = ref(null);
const ctx = ref(null);
const image = ref(null);
const drawing = ref(false);
const startPoint = ref({ x: 0, y: 0 });
const eraseWidth = ref(30); // 初始擦除宽度  
onMounted(() => {
  ctx.value = canvas.value.getContext('2d');
});

const imagePaths = [
  '/src/assets/images/Masked Beauty.png',
  '/src/assets/images/auto.png',
  '/src/assets/images/meimsao.png'
];
let currentImageIndex = 0;

// 渲染指定索引的图片到画布上  
const renderImageToCanvas = (imagePath) => {
  const img = new Image();
  img.onload = () => {
    // 设置画布的尺寸与图片的尺寸相匹配  
    canvas.value.width = img.width;
    canvas.value.height = img.height;
    if (canvas.value && ctx.value) {
      // 清除画布上的旧内容  
      ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
      // 绘制新图片到画布上，使用图片的原始尺寸  
      ctx.value.drawImage(img, 0, 0, img.width, img.height);
    }
  };
  img.src = imagePath;
};

// 随机切换图片并渲染到画布上  
const renderRandomImage = () => {
  currentImageIndex = Math.floor(Math.random() * imagePaths.length);
  renderImageToCanvas(imagePaths[currentImageIndex]);
};

// 组件挂载时初始化  
onMounted(() => {
  ctx.value = canvas.value ? canvas.value.getContext('2d') : null;
  // 初始化时渲染第一张图片  
  renderImageToCanvas(imagePaths[0]);
});

const startDrawing = (e) => {
  drawing.value = true;
  startPoint.value = { x: e.offsetX, y: e.offsetY };
};

const draw = (e) => {
  if (!drawing.value) return;

  ctx.value.globalCompositeOperation = 'destination-out'; // 清除像素  

  // 计算鼠标移动的距离  
  const dx = e.offsetX - startPoint.value.x;
  const dy = e.offsetY - startPoint.value.y;

  // 基于移动距离动态调整擦除宽度（这里简单地将距离乘以一个系数）  
  const dynamicEraseWidth = Math.abs(dx) > Math.abs(dy) ? Math.abs(dx) : Math.abs(dy);
  const adjustedEraseWidth = Math.max(eraseWidth.value, dynamicEraseWidth * 0.1); // 0.1是调整系数，可以根据需要调整  

  ctx.value.beginPath();
  ctx.value.arc(e.offsetX, e.offsetY, adjustedEraseWidth, 0, Math.PI * 2); // 绘制一个圆形擦除区域  
  ctx.value.closePath();
  ctx.value.fill(); // 清除圆形区域内的像素  

  // 更新起始点，以便下一次绘制基于当前位置  
  startPoint.value = { x: e.offsetX, y: e.offsetY };
};


const stopDrawing = () => {
  drawing.value = false;
  ctx.value.globalCompositeOperation = 'source-over'; // 重置为默认状态  
};

const downloadImage = () => {
  // 将Canvas内容转换为data URL  
  const dataURL = canvas.value.toDataURL('image/png');
  // 创建一个链接元素  
  const link = document.createElement('a');
  link.href = dataURL;
  // 设置下载的文件名  
  link.download = 'cropped-image.png';
  // 触发链接的点击事件以开始下载  
  document.body.appendChild(link);
  link.click();
  // 移除链接元素  
  document.body.removeChild(link);
}; 
</script>

<style scoped>
canvas {
  cursor: crosshair;  position: relative;
}
.nb{
  position: absolute;
  left: 77%;
  bottom: 5%;
}
</style>